/**
 * cavas绘图
 */

const canvas = document.getElementById('demo')
const context = canvas.getContext("2d")
//开启新的绘制路径
context.beginPath()
//画点
context.fillStyle = "#0000FF"
context.fillRect(2, 2, 4, 4)
context.font = "18px bold 宋体"
//定义起点（10，10）
context.moveTo(10, 10)
//定义终点位置（50，100）
context.lineTo(10, 50)

//图形色填充
canvas.fillStyle = "#f0f7f3"
context.fill()
//线条颜色
context.lineWidth = 2
context.strokeStyle = "red"
//沿着坐标顺序路径绘制直线
context.stroke()
//关闭绘制路径
context.closePath()